<template>
    <el-card>
        <div slot="header">
            <span>管理员信息</span>
        </div>

        <div>
            <span>管理员ID： </span>{{id}}
            <el-divider></el-divider>
            <span>账号： </span>{{account}}
            <el-divider></el-divider>
            <span>用户组： </span>{{userGroup}}
            <el-divider></el-divider>
            <span>创建时间： </span>{{ctime | formater}}
            <el-divider></el-divider>
            <span>管理员头像： </span>
            <el-upload
                class="avatar-uploader"
                action="http://sell.h5.itsource.cn:8087/users/avatar_upload"
                :show-file-list="false"
                :on-success="success"
                :before-upload="beforeUpload">
                <img v-if="imgUrl" :src="imgUrl" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
        </div>
    </el-card>
</template>

<script>
import local from "@/utils/local.js";  //引入本地存储
import {avataredit} from "@/api/user.js";  //引入账号模块接口
export default {
	data() {
        let userInfo = local.get("userInfo");
		return {
            imgUrl: '',
            ...userInfo,
		};
	},
	methods: {
        // 头像上传成功后执行的回调函数
		async success(res, file) {
            if(res.code === 0){
                this.imgUrl = res.imgUrl;
            }
            await avataredit({imgUrl: res.imgUrl});  //将头像地址保存到数据库
            
            this.$bus.$emit("sedImgUrl", this.imgUrl);  //传参数到顶部头像
		},
        // 头像上传之前只执行的回调函数
		beforeUpload(file) {
            const isJPG = file.type === 'image/jpeg';
            const isLt2M = file.size / 1024 / 1024 < 2;

            if (!isJPG) {
                this.$message.error('上传头像图片只能是 JPG 格式!');
            }
            if (!isLt2M) {
                this.$message.error('上传头像图片大小不能超过 2MB!');
            }
            return isJPG && isLt2M;
		}
	},

    filters:{
        // 日期过略器
        formater(time){
            let date = new Date(time);
            return date.getFullYear() + "/" + (date.getMonth()+1) + "/" + date.getDate();
        }
    }
}
</script>

<style lang="less" scoped>
    :deep(.avatar-uploader .el-upload) {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }
    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 80px;
        height: 80px;
        line-height: 80px;
        text-align: center;
    }
    .avatar {
        width: 80px;
        height: 80px;
        display: block;
    }
    .avatar-uploader{
        display: inline-block;
        vertical-align: middle;
    }
</style>